<script setup>
import departmentApi from '@/api/departmentApi';
import {reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import service from '@/api';
import {Delete, Edit, Money, Refresh, Search, ShoppingTrolley} from "@element-plus/icons-vue";


const departments = ref([]);

// 分页信息
const pageInfo = reactive({
  page: 1,
  limit: 10,
  total: 0,
  name: '',
  description: '',
})

// 获取科室列表
loadDepartments();

// 页码和页面大小更新
function loadDepartments() {
  departmentApi.search(pageInfo).then(result => {
    departments.value = result.data.records;
    pageInfo.total = result.data.total;
  });
}

// 添加的相关操作
const addVisible = ref(false);
const addDepartment = ref({});

function showAdd() {
  addVisible.value = true;    // 显示添加窗口
}

function handleAdd() {
    departmentApi.add(addDepartment.value).then(result => {
    console.log(result)
    if (result.code == 200) {
      ElMessage({message: '新的科室创建成功！', type: 'success'})
      addVisible.value = false;
      addDepartment.value = {};
    } else {
      ElMessage.error(result.msg);
    }
    // 刷新表格数据
    loadDepartments();
  });
}

// 编辑的操作
const editVisible = ref(false);

const editDepartment = ref({});

function showEdit(row) {
  editVisible.value = true;
  editDepartment.value = JSON.parse(JSON.stringify(row));   // 深拷贝
  editDepartment.value.password = "";
}

function handleEdit() {
  departmentApi.edit(editDepartment.value).then(result => {
    if (result.code == 200) {
      ElMessage({message: '编辑科室成功！', type: 'success'})
      editVisible.value = false;
      editDepartment.value = {};
    } else {
      ElMessage.error(result.msg);
    }
    // 刷新表格数据
    loadDepartments();
  });
}

//删除科室
function handleRemove(member) {
  ElMessageBox.confirm(
      '亲，确定要移除当前科室么?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '我在想想',
        type: 'warning',
      }
  ).then(() => {
    // 确定
    departmentApi.remove(member.id).then(result => {
      if (result.code == 200) {
        ElMessage({message: '移除科室成功！', type: 'success'})
      } else {
        ElMessage.error(result.data);
      }
      // 刷新表格数据
      loadDepartments();
    });
  }).catch(() => {
    ElMessage({message: '取消移除！', type: 'info'})
  });

}

function onSearch() {
  pageInfo.page = 1;
  loadDepartments();
}
//清空
function clearForm() {
  pageInfo.name = '';
  pageInfo.description = '';
  loadDepartments();
}
//操作挂号费
// 调整挂号费的操作
const adjustPriceVisible = ref(false);
const adjustPriceForm = ref({
  price: null
});

function showAdjustPrice(row) {
  adjustPriceVisible.value = true;
  adjustPriceForm.value.price = row.price;
  adjustPriceForm.value.id = row.id;
  adjustPriceForm.value.name=row.name;
}
function handleAdjustPrice() {
  departmentApi.editPrice(adjustPriceForm.value).then(result => {
    if (result.code == 200) {
      ElMessage({message: '调整挂号费成功！', type: 'success'})
      adjustPriceVisible.value = false;
      adjustPriceForm.value = {  price: null };
      // 刷新表格数据
      loadDepartments();
    } else {
      ElMessage.error(result.msg);
    }
  });
}



</script>

<template>
  <div class="content">
    <el-form :model="pageInfo" :inline="true">
      <el-form-item label="科室名称" :label-width="80">
        <el-input v-model.trim="pageInfo.name" placeholder="请输入科室名称"/>
      </el-form-item>
      <el-form-item label="主治症状" :label-width="80">
        <el-input v-model.trim="pageInfo.description" placeholder="请输入主治症状"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">
          <el-icon>
            <Search></Search>
          </el-icon>
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="background-color: #99b2e2; border-color: #a3bae6; color: white;" @click="clearForm">
          <el-icon>
            <Refresh/>
          </el-icon>
          重置
        </el-button>
      </el-form-item>


    </el-form>

    <div class="bar">
      <el-button type="success" @click="showAdd">添加科室</el-button>
    </div>
    <el-table :data="departments" :stripe="true" :border="true" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"/>
      <el-table-column prop="name" label="科室名称" width="180"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="price" label="挂号费" width="100" :formatter="row=>'￥'+row.price.toFixed(2)"/>
      <el-table-column label="操作" width="315">
        <template #default="scope">
          <el-button size="small" type="warning"
                     @click="showAdjustPrice(scope.row)">
            <el-icon>
              <Money/>
            </el-icon>&nbsp;调整挂号费
          </el-button>
          <el-button size="small" type="success"
                     @click="showEdit(scope.row)">
            <el-icon>
              <edit/>
            </el-icon>&nbsp;编辑
          </el-button>
          <el-button size="small" type="danger"
                     @click="handleRemove(scope.row)">
            <el-icon>
              <delete/>
            </el-icon>&nbsp;删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
                   :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
                   layout="total, sizes, prev, pager, next, jumper" @change="loadDepartments"/>
  </div>

  <!-- 添加的弹窗 -->
  <el-dialog v-model="addVisible" title="添加新科室" width="500">
    <el-form :model="addDepartment">
      <el-form-item label="科室名称" :label-width="90">
        <el-input v-model="addDepartment.name" placeholder="请输入科室名称"/>
      </el-form-item>
      <el-form-item label="主治病症" :label-width="90">
        <el-input v-model="addDepartment.description" placeholder="请输入科室的主治病症"/>
      </el-form-item>
      <el-form-item label="挂号费" :label-width="90">
        <el-input type="number" v-model="addDepartment.price" placeholder="请输入科室的挂号费"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">
          创建
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑的弹窗 -->
  <el-dialog v-model="editVisible" title="编辑科室" width="500">
    <el-form :model="editDepartment">
      <el-form-item label="科室名称" :label-width="90">
        <el-input v-model="editDepartment.name" placeholder="请输入科室名称"/>
      </el-form-item>
      <el-form-item label="主治病症" :label-width="90">
        <el-input v-model="editDepartment.description" placeholder="请输入主治病症"/>
      </el-form-item>
      <el-form-item label="挂号费" :label-width="90">
        <el-input type="number" v-model="editDepartment.price" placeholder="请输入科室的挂号费"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
<!--  修改挂号费-->
  <!-- 调整挂号费的弹窗 -->
  <el-dialog v-model="adjustPriceVisible" title="调整挂号费" width="500">
    <el-form :model="adjustPriceForm">
      <el-form-item label="科室名称" :label-width="90">
        <el-input v-model="adjustPriceForm.name" disabled/>
      </el-form-item>
      <el-form-item label="新挂号费" :label-width="90">
        <el-input type="number" v-model="adjustPriceForm.price" placeholder="请输入新的挂号费">
          <template #append>元</template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="adjustPriceVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdjustPrice">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style>


</style>